<template>
	<div class="zco-ocr-id-card-container">
		<p>{{ getMessage }}</p>
		<template v-if="status === 'done'">
			<p>识别成功</p>
			<p>识别结果：</p>
			<div v-if="side === 'face'">
				<p>公民身份证号码：{{ idNumber }}</p>
				<p>姓名：{{ Name }}</p>
				<p>性别：{{ sex }}</p>
				<p>民族：{{ ethnicity }}</p>
				<p>住址：{{ address }}</p>
				<p>出生日期：{{ birthDate }}</p>
			</div>
			<div v-else>
				<p>签发机关：{{ issueAuthority }}</p>
				<p>有效期限：{{ validPeriod }}</p>
			</div>
		</template>
		<template v-if="status === 'failed'">
			<p>识别失败</p>
		</template>
	</div>
</template>
<script>
export default {
	name: 'APP',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		status: {
			type: String,
			default: () => ''
		},
		Name: {
			type: String,
			default: () => ''
		},
		idNumber: {
			type: String || Number,
			default: () => ''
		},
		sex: {
			type: String,
			default: () => ''
		},
		ethnicity: {
			type: String,
			default: () => ''
		},
		address: {
			type: String,
			default: () => ''
		},
		birthDate: {
			type: String,
			default: () => ''
		},
		validPeriod: {
			type: String,
			default: () => ''
		},
		issueAuthority: {
			type: String,
			default: () => ''
		},
		side: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getMessage() {
			return `对${this.toUserRole === 'customer' ? '访客' : '坐席'}<${this.toUserName}>上传的${this.side === 'back' ? '身份证国徽面照片' : '身份证人像面照片'}进行OCR识别`;
		}
	},
	data() {
		return {};
	},
	methods: {},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-ocr-id-card-container p {
	margin: 0;
}
</style>
